<template>
  <div class="chat-warp">
    <div class="chat-room-name"></div>
    <div ref="chat" class="chat-area">
      <q-chat-message
        v-for="item in messages"
        :key="item.id"
        :name="item.username"
        :avatar="item.avatar"
        :text="[item.message]"
        :sent="Boolean(item.type)"
      />
    </div>
    <div class="chat-ipt-area">
      <textarea class="message-ipt" v-model="message"></textarea>
      <q-btn
        class="send-btn"
        color="primary"
        label="发送"
        size="12px"
        @click="handleSend"
      />
    </div>
  </div>
</template>

<script>
import { uid } from 'quasar';
export default {
  data() {
    return {
      messages: [
        {
          id: '0',
          type: 1,
          message: '在吗',
          username: 'kevin',
          avatar: require('@/assets/avatar.jpg'),
        },
        {
          id: '1',
          type: 0,
          message: '不在',
          username: 'john',
          avatar: require('@/assets/avatar1.png'),
        },
        {
          id: '2',
          type: 0,
          message: '有什么事情吗？',
          username: 'john',
          avatar: require('@/assets/avatar1.png'),
        },
        {
          id: '3',
          type: 1,
          message: '今天忙吗？',
          username: 'kevin',
          avatar: require('@/assets/avatar.jpg'),
        },
        {
          id: '4',
          type: 0,
          message: '还好，不是很忙',
          username: 'john',
          avatar: require('@/assets/avatar1.png'),
        },
        {
          id: '5',
          type: 1,
          message: '那晚上有事儿吗？',
          username: 'kevin',
          avatar: require('@/assets/avatar.jpg'),
        },
        {
          id: '6',
          type: 0,
          message: '晚上没事儿',
          username: 'john',
          avatar: require('@/assets/avatar1.png'),
        },
        {
          id: '7',
          type: 1,
          message: '那晚上出来喝点？',
          username: 'kevin',
          avatar: require('@/assets/avatar.jpg'),
        },
        {
          id: '8',
          type: 0,
          message: '去哪儿喝？',
          username: 'john',
          avatar: require('@/assets/avatar1.png'),
        },
        {
          id: '9',
          type: 1,
          message: '老地方',
          username: 'kevin',
          avatar: require('@/assets/avatar.jpg'),
        },
      ],
      message: '',
      userid: '',
      nickname: '',
    };
  },
  mounted() {
    const local = this.$storage.get('_i');
    const { uid, nickname } = local;
    this.$socket.emit('conection', { uid, nickname });
    this.scrollBottom();
    this.getUserInfo();
  },
  sockets: {
    connect() {
      console.log('连接成功');
    },
    online(data) {
      this.$q.notify(`${data.nickname}上线了`);
    },
    response(data) {
      const { userid } = this;
      const msgObj = {
        id: uid(),
        type: data.uid === userid ? 1 : 0,
        message: data.message,
        username: data.nickname,
        avatar: require('@/assets/avatar.jpg'),
      };
      this.messages = [...this.messages, msgObj];
    },
  },
  updated() {
    this.scrollBottom();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      const localInfo = this.$storage.get('_i');
      if (localInfo && 'uid' in localInfo) {
        this.userid = localInfo.uid;
        this.nickname = localInfo.nickname;
      }
    },
    // 发送消息
    handleSend() {
      if (this.message) {
        this.$socket.emit('sendMsg', {
          uid: this.userid,
          nickname: this.nickname,
          message: this.message,
        });
        this.message = '';
      }
    },
    // 滚动到最底部
    scrollBottom() {
      const h = this.$refs.chat.scrollHeight;
      // debugger
      this.$refs.chat.scrollTop = h;
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-warp {
  height: 100vh;
  .chat-room-name {
    height: 48px;
    background: #fff;
  }
  .chat-area {
    height: calc(100vh - 208px);
    border: 1px solid #e1e1e1;
    border-left: 0;
    border-right: 0;
    overflow: auto;
  }
  .chat-ipt-area {
    height: 110px;
    overflow: hidden;
    position: relative;
    .message-ipt {
      width: 100%;
      height: 80px;
      border: 0 none;
      box-sizing: border-box;
      padding: 5px;
      resize: none;
      font-size: 14px;
    }
    .send-btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
<style lang="scss">
.chat-warp {
  .q-message-text:last-child {
    min-height: 24px;
    .q-message-text-content {
      font-size: 14px;
    }
  }
}
</style>
